<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>state</title>
</head>

<body>
  <!-- 准备一个“容器” -->
  <div id="test"></div>
</body>
<!-- react 核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- react 操作dome -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.13.17/babel.min.js"></script>
<script type="text/babel">
  // 1.创建类式组件
  class Weather extends React.Component {
    // 构造器调用 -- 1次
    constructor(props) {
      super(props)
      this.state = { isHot: false,wind:'微风' }
      // 解决changeWeather中this指向问题
      this.changeWeathers = this.changeWeather.bind(this)
    }


    // render 调用 -- 1+n次   1是初始化，n是状态更新的次数
    render() {
      const {isHot,wind} = this.state
      return <h1 id='title' onClick={this.changeWeathers}>今天天气很{this.state.isHot ? '炎热' : '寒冷'}，{wind}</h1>
    }


    
    // changeWeather 调用 -- 点几次调几次
    changeWeather() {
    // changeWeather放在哪里？——> Weather的原型上，供实例使用
    // 由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
    // 类中的方法默认开启了局部严格模式，所以changeWeather中的this是undefined

    // 获取原来的值
    const isHot = this.state.isHot
    // 严重注意： 状态不可直接更改，下面这行就是直接更改！！！
    // this.state.isHot = !isHot  // 直接更改

    // 严重注意： 状态必须通过setState进行修改更新,且合并
    this.setState({
      isHot: !isHot
    })
  }
  }
  // 2.渲染组件到页面
  ReactDOM.render(<Weather />, document.getElementById('test'))
  /*
  const title = document.getElementById('title')
  title.addEventListener('click', () => {
    console.log('点击')
  })
  */
  /*
  
    const title = document.getElementById('title')
    title.onclick = () => {
      alert('点击')
    }
    */

</script>

</html>